<template>
  <!-- 双折线图 -->
  <div
    id="bloodPressureCharts"
    class="myChart"
  />
</template>

<script>
  // echarts用5.0.0版本以下的
  import echarts from 'echarts';
  export default {
    name: 'Home',
    components: {},
    props: {
      configs: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 正常区域数据
      normalData: {
        type: Array,
        default: () => {
          return null;
        },
      },
    },
    data() {
      return {
        active: 0,
        myChart: '',
      };
    },
    created() {},
    mounted() {
      this.myChart = echarts.init(document.getElementById('bloodPressureCharts'));
      this.initMyChartData();
    },
    methods: {
      // 初始化echart 雷达图数据
      initMyChartData() {
        this.setEchartsOption(this.configs, this.normalData);
      },
      setEchartsOption() {
        // 基于准备好的dom，初始化echarts实例
        // 绘制图表，this.echarts1_option是数据
        this.myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line', // 选中网格线的样式
              lineStyle: {
                type: 'dashed',
                width: '2',
                color: '#FF8510',
              },
            },
          },
          grid: {
            top: '10px',
            bottom: '50px',
            left: '41px',
            right: '21px',
          },
          legend: {
            y: 'bottom',
            x: 'center',
            icon: 'roundRect', // 方形带有radis
            itemWidth: 16, // 设置宽度
            itemHeight: 16, // 设置高度
            data: ['收缩压', '舒张压'],
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              fontSize: 11,
              color: '#999999', // 改变x轴线和文本样式
            },
            axisLine: {
              lineStyle: {
                color: '#E0E0E0', // 改变X轴线样式
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                width: '1',
                color: '#E0E0E0', // 改变x轴网格线样式
              },
            },
            data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
          },
          yAxis: {
            type: 'value',
            interval: 20, // Y轴数据间隔
            min: 60, // 最小值
            max: 160, // 最大值
            axisLabel: {
              // Y轴文本样式
              fontSize: 13,
              color: '#999',
            },
            axisLine: {
              // 改变Y轴线样式
              lineStyle: {
                color: '#E0E0E0',
              },
            },
            splitLine: {
              // Y轴网格线
              show: false, // 隐藏Y轴网格线
            },
          },
          series: [
            {
              name: '舒张压',
              type: 'line',
              symbolSize: 20, // 点大小
              symbol: () => {
                // 点的样式
                return 'image://'; // 点为base64图片
              },
              stack: 'lb',
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#FF8510', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(252,187,67,0)', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                  opacity: 0.5,
                  origin: 'auto',
                },
              },
              itemStyle: {
                normal: {
                  color: '#FF8510', // 点的颜色
                  lineStyle: {
                    color: '#FF8510', // 线的颜色
                  },
                },
              },
              data: [80, 80, 80, 80, 80, 80],
            },
            {
              name: '收缩压',
              type: 'line',
              symbolSize: 20,
              // symbol: 'circle', // 设定为实心点
              symbol: () => {
                return 'image://';
              },
              stack: 'lb',
              itemStyle: {
                normal: {
                  color: '#FF8181',
                  lineStyle: {
                    color: '#FF8181',
                  },
                },
              },
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#FF8181', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(255,129,129,0)', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                  opacity: 1,
                  origin: 'auto',
                },
              },
              data: [20, 20, 40, 20, 20, 20],
            },
          ],
        });
        this.myChart.on('click', function (params) {
          // 鼠标移入
          console.log('my console params : ', params);
        });
      },
    },
  };
</script>

<style scoped lang="scss">
.myChart {
  display: flex;
  width: 100%;
  height: 300px;
  margin: 0 auto;
  justify-items: center;
  align-items: center;
}
</style>
